/**
 * @description  : 内管实地核查-零售户-结算记录
 * @descriptionDetail : 结算记录
 * @copyright    : 浙江烟草
 * @author       : mwq
 * @create       : 2022-12-05 10:46:52
 */
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->
    <view class="content u-page">
      <view class="tabsBottom">
        <u-sticky>
          <u-cell-group class="sticky-header">
            <u-cell-item icon="calendar" title="开始/结束日期" :value="rangeDate" :arrow="true" @tap="dateRange=true">
            </u-cell-item>
          </u-cell-group>
        </u-sticky>
        <retail-head :licNo="licNo" style="margin-top:60px;padding:5px;"></retail-head>
        <me-table
          :i="0"
          :index="0"
          :load-data="loadData"
          :init-load="true" 
          ref="mescrollItem0"
        > 
          <u-card
            :show-foot="false"           
            box-shadow="#e5e5e5 0px 0px 30px"
            slot-scope="d"
            @click="handlerOrderList(d.data)"
          >
            <template #head>
              <view class="headStyle">
                <view style="font-size:24rpx;color:#BCBCBC;float: left;">
                  <u-icon name="clock" size="32" />
                  2022-02-12
                </view>
              </view>
            </template>
            <template #body>
              <u-row>
                <u-col span="2">
                  <view class="indexN">
                    {{ index++ }}
                  </view>
                </u-col>
                <u-col span="10">
                  <u-row>
                    <u-col span="2" style="font-size:32rpx;color:#333333;font-weight:bold;">
                      现金
                    </u-col>
                    <u-col span="10" style="border-left: 1rpx solid #DDDDDD ;font-size:34rpx;color:#333333;font-weight:bold;">
                      Dd730011775529
                    </u-col>
                    <u-col span="3" style="color:#999999;font-size:25rpx;margin-top:10rpx;margin-bottom:10rpx;">
                      结算账户:
                    </u-col>
                    <u-col span="9" style="color:#555555;font-size:34rpx;font-weight:bold;margin-top:10rpx;margin-bottom:10rpx;">
                      694 0002 0800 0514
                    </u-col>
                  </u-row>
                </u-col>
                <u-col span="2" style="font-size:32rpx;color:#999999;">
                  异常:
                </u-col>
                <u-col span="10" style="font-size:32rpx;color:#666666;">
                  结算内容文本描述，结算内容文本描述，结算内容文本描述，结算内容文本描述，
                </u-col>
              </u-row>
            </template>
          </u-card>
        </me-table>
      </view>
    </view>
    <u-calendar mode="range" max-date="2099-12-31" v-model="dateRange" @change="handlerSearchDate"></u-calendar>
  </view>
</template>

<script> 
import meTable from '@/components/me-table.vue'
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import retailHead from "./components/retail-head.vue"
import checkService from "@/service/check/check.service"
import internalService from '@/service/internal/internal.service';
import {dateUtils,} from "@/common/util"
export default {
  components: { 
    meTable,retailHead,
  },
  mixins: [MescrollMoreMixin,],
  
  onLoad(option) {
    this.licNo = option.licNo;
  },
  data() {
    return {
      user: this.$storage.get(this.$rp.common.USER),
      dateRange: false,
      rangeDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())) + "至" + dateUtils.dateFormat("yyyy-MM-dd", dateUtils.lastDate(new Date())),
      startDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())),
      endDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.lastDate(new Date())),
      isOpen: false,
      keyword: "",
      background: {
        background: "#fff",
      },
      headStyle: {
        fontWeight: 600,
      },
      index:1,
      detailShow: false,  // 显示涉案卷烟
      involvedDetails: [], // 涉案卷烟数据
      licNo:'',
      caseBeginDate:dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())),
      caseEndDate:dateUtils.dateFormat("yyyy-MM-dd", dateUtils.lastDate(new Date())),  
    };
  },
  methods: {
    loadData(page) {
      return checkService.getRetailerCaseInfoByParam(page.num, page.size,{ caseBeginDate: this.caseBeginDate,caseEndDate: this.caseEndDate,licNo: this.licNo,});
    },
    // 日期区间查询条件
    handlerSearchDate(d) {
      this.caseBeginDate = d.startDate;
      this.caseEndDate = d.endDate;
      this.rangeDate = d.startDate + '至' + d.endDate;
      this.$refs["mescrollItem0"].refresh(); 
    },
    // 涉案卷烟
    handlerOrderList(item) {
      this.$u.loading('查询中...');
      let searchData = {
        caseDateBegin: item.caseDate,
        caseDateEnd: item.caseDate,
        caseCode:item.caseCode,
        status:'02',
      }
      internalService.getOutFlowCigaByParam(1,500,searchData).then(dr => {
        this.$u.hideLoading();
        if (dr.success) {
          this.involvedDetails = dr.data;
          this.detailShow = true;
        } else {
          this.$u.toast(dr.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #FFF;
}
.sticky-header {
  position: fixed;
  /* #ifdef H5-DINGDING  */
  top: 0px;
  /* #endif */
  /* #ifndef H5-DINGDING  */
  top: 45px;
  /* #endif */
  width: 100%;
  z-index: 999;
}
/deep/ .u-tabbar__content__item__text {
  font-size: 15px;
}
.headStyle{
    height: 35rpx;
}
.indexN{
  width: 80rpx;
  height: 80rpx;border-radius: 50%;background-color: #E3E9FF;
  text-align:center;padding-top:16rpx;font-size:36rpx;color:#027AFF;font-weight:bold;
  float: left;
}
</style>
